import './index.less';
import { defineComponent } from 'vue';
import { getProjectList } from '@/api/home';
import '../../../style/index.less';
import {
  ElDatePicker,
  ElDialog,
  ElOption,
  ElPagination,
  ElSelect,
  ElTable,
  ElTableColumn
} from 'element-plus';
export default defineComponent({
  name: 'ItemTable',
  props: ['params'],
  setup(props: any, { emit, slots, expose }) {
    const dialogVisible = ref(false);
    const pageable = ref({
      page: 1,
      pageSize: 15,
      total: 0
    }) as AnyObject;
    const itemTitle = ref('');
    const data = ref({}) as AnyObject;
    const params = ref({}) as AnyObject;
    const handleSizeChange = (pageSize: number) => {
      pageable.value.pageSize = pageSize;
      getProductList();
    };
    const handleCurrentChange = (page: number) => {
      pageable.value.page = page;
      getProductList();
    };

    const getProductList = () => {
      const { project, group, date, ...asets } = params.value;
      let realDate;
      if (params.value.date) {
        const month = (
          '' +
          (new Date(params.value.date).getMonth() + 1)
        ).padStart(2, '0');
        const year = new Date(params.value.date).getFullYear();
        realDate = year + '-' + month;
      } else {
        realDate = null;
      }
      getProjectList({
        page: pageable.value.page,
        pageSize: pageable.value.pageSize,
        ...asets,
        month: realDate
      }).then((res) => {
        data.value = res.data;
        pageable.value.total = res.data.total;
      });
    };
    const getTitle = (type: number) => {
      const _title = [
        '所有项目',
        '延期项目',
        '正常项目',
        '延期预警',
        '规范按时完成',
        '超时完成',
        '进行中项目',
        '已完成项目'
      ];

      const prefix = params.value.is_company ? '公司项目' : '个人项目';
      itemTitle.value = type?(prefix + '-' + _title[type]):prefix;
    };
    watch(
      () => dialogVisible.value,
      (val: boolean) => {
        console.log(props.params);
        if (val) {
          params.value = JSON.parse(JSON.stringify(props.params));
          getTitle(params.value.type);
          getProductList();
        } else {
          params.value = {};
        }
      }
    );
    expose({ dialogVisible });
    return () => (
      <ElDialog
        lock-scroll
        draggable
        v-model={dialogVisible.value}
        title={itemTitle.value}
        style={{ maxWidth: '800px', with: 'auto' }}
      >
        <div class="item_right">
          {Boolean(params.value.is_company) && (
            <ElSelect
              v-model={params.value.pro_type}
              clearable
              onChange={getProductList}
              placeholder="项目类型"
            >
              {params.value.project?.map((_name: string, _index: number) => (
                <ElOption key={_index} label={_name} value={_name}></ElOption>
              ))}
            </ElSelect>
          )}
          {Boolean(params.value.is_company) && (
            <ElSelect
              v-model={params.value.organize}
              clearable
              onChange={getProductList}
              placeholder="组织类型"
            >
              {params.value.group?.map((_name: string, _index: number) => (
                <ElOption key={_index} label={_name} value={_name}></ElOption>
              ))}
            </ElSelect>
          )}
          {params.value.date && (
            <ElDatePicker
              v-model={params.value.date}
              type="month"
              class="month_selector"
              range-separator="/"
              clearable={false}
              // @ts-ignore
              onChange={getProductList}
            />
          )}
        </div>
        <ElTable
          header-row-class-name="table_header"
          size="small"
          height="500"
          data={data.value?.list}
        >
          <ElTableColumn prop="code" label="项目编码" />
          <ElTableColumn prop="project_name" label="项目经理" />
          <ElTableColumn prop="product_name" label="产品经理" />
          <ElTableColumn prop="project" label="项目" />
          <ElTableColumn prop="name" label="项目名称" />
          <ElTableColumn prop="create_time" label="计划立项日期" />
          <ElTableColumn prop="node" label="当前节点" />
          <ElTableColumn prop="plan_time" label="计划时间" />
          <ElTableColumn prop="over_time" label="是否超期" />
          <ElTableColumn prop="finish_rate" label="进展完成率" />
          <ElTableColumn prop="node_rate" label="已完成节点超期率" />
          <ElTableColumn prop="day" label="项目进行天数" />
          <ElTableColumn prop="pace" label="计划进度" />
          <ElTableColumn prop="delay_rate" label="项目延期率" />
          <ElTableColumn prop="norm_time" label="规范用时" />
          <ElTableColumn prop="is_norm" label="是否规范完成" />
        </ElTable>
        <ElPagination
          v-model:current-page={pageable.value.page}
          v-model:page-size={pageable.value.pageSize}
          small
          page-sizes={[15, 30, 50, 100]}
          hide-on-single-page
          layout="total, sizes, prev, pager, next, jumper"
          total={pageable.value.total}
          onSize-change={handleSizeChange}
          onCurrent-change={handleCurrentChange}
        ></ElPagination>
      </ElDialog>
    );
  }
});
